<div style="position: absolute;top: 0px;bottom: 59px;left: 16px;right: 16px;z-index: 1" class="md-tabs-fix">

    <h3>{{vars.currentDatabase}}
        <i class="mdi mdi-chevron-right"></i>
        {{vars.currentTable}}</h3>

    <md-tabs md-dynamic1-height md-border-bottom class="h100">
        <!-- колонки -->
        <md-tab >
            <md-tab-label>
                <i class="mdi mdi-table-column-plus-after mr-"></i>Structure
            </md-tab-label>
            <md-tab-body>
                <table class="data-table" style="font-size: 80%">
                    <thead>
                        <tr class="text-left">
                            <th style="width: 40px"></th>
                            <th style="width: 40%">Name</th>
                            <th style="width: 10%">Type</th>
                            <th style="width: 10%">Default type</th>
                            <th style="width: 10%">Value</th>
                            <th style="width: 10%">Size</th>
                            <th style="width: 10%">Compress</th>
                        </tr>
                    </thead>
                    <tbody>

                        <tr class="text-left" ng-repeat="field in vars.columns.data">
                            <td class="tc-grey-400">{{$index + 1}}</td>
                            <td ng-repeat="key in ['name', 'type', 'default_type', 'default_expression','size','ratio'] track by $index">
                                {{field[key]}}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </md-tab-body>
        </md-tab>

        <!-- информация -->
        <md-tab>
            <md-tab-label>
                <i class="mdi mdi-information mr-"></i>Information</md-tab-label>
            <md-tab-body>
                <div class="data-table-container" style="overflow:hidden;">
                    <table class="data-table">
                        <tbody>
                            <tr class="data-table-row">
                                <td class="tc-grey-400" style="width: 40px">1</td>
                                <td style="width: 200px">Size</td>
                                <td>
                                    {{vars.statistics.size}}
                                </td>
                            </tr>
                            <tr class="data-table-row">
                                <td class="tc-grey-400">2</td>
                                <td>Size,bytes</td>
                                <td>
                                    {{vars.statistics.sizeBytes}}
                                </td>
                            </tr>
                            <tr class="data-table-row">
                                <td class="tc-grey-400">3</td>
                                <td>First row</td>
                                <td>
                                    {{vars.statistics.minDate}}
                                </td>
                            </tr>
                            <tr class="data-table-row">
                                <td class="tc-grey-400">4</td>
                                <td>Last row</td>
                                <td>
                                    {{vars.statistics.maxDate}}
                                </td>
                            </tr>
                            <!--<tr class="data-table-row">-->
                                <!--<td class="tc-grey-400">4</td>-->
                                <!--<td>Uncompression size</td>-->
                                <!--<td ng-if="!vars.isRawStatistics" >-->
                                    <!--<md-button class="md-primary" ng-click="calcRawSize()">Calc-->
                                    <!--</md-button>-->
                                <!--</td>-->
                                <!--<td ng-if="vars.isRawStatistics">-->
                                    <!--{{vars.rawstatistics}}-->
                                <!--</td>-->
                            <!--</tr>-->
                        </tbody>
                    </table>

                    <br>
                    <b>SHOW CREATE TABLE</b><br>
                    <pre>{{vars.createtable}}</pre>

                </div>
            </md-tab-body>
        </md-tab>


        <!-- данные -->
        <md-tab md-active="true">
            <md-tab-label>
                <i class="mdi mdi-table-large mr-"></i>Data
            </md-tab-label>
            <md-tab-body>
                <div style="display:table">

                </div>
                <div class="pl+ pt+ pb+ pr" style="font-size: .75rem;max-height:100%">

                    <div class="float-right" style="margin-top: -12px">
                        <md-button class="md-icon-button" aria-label="load prev" ng-click="loadPrev()" ng-disabled="vars.offset === 0">
                            <i class="mdi mdi-arrow-left"></i>
                        </md-button>
                        <md-button class="md-icon-button" aria-label="load next" ng-click="loadNext()">
                            <i class="mdi mdi-arrow-right"></i>
                        </md-button>
                    </div>
                    Data
                    <span class="tc-grey-400">From
                        {{vars.offset}}
                        To
                        {{vars.offset + vars.limit}}</span>
                </div>
                <div class="card__actions p+" style="position:absolute; top:46px; bottom:0;left:0;right:0; overflow:hidden; ">
                    <span ng-if="vars.data === null&&!vars.loading" class="fs-caption">No data</span>
                    <md-progress-circular ng-if="vars.loading" class="md-accent" md-diameter="40"></md-progress-circular>

                    <!--<div ui-grid="ugrid" ui-grid-resize-columns ui-grid-auto-resize ui-grid-exporter ui-grid-selection class="grid" style="width: 99%"></div>-->
                        <draw-widget ng-if="!vars.loading" widget="tablewidget" isdark="tablewidget.isDark" class="widget widget-{{::tablewidget.type}} widget-selector widget-grid-stack-item" events="events"></draw-widget>

                </div>
            </md-tab-body>
        </md-tab>
    </md-tabs>
</div>
